<template>
    <div class="messages" v-if="visible">
        <svg
            v-if="'warning' == type"
            fill="none"
            viewBox="0 0 16 16"
            width="1em"
            height="1em"
            class="message-icon"
        >
            <path
                fill="currentColor"
                d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
                fill-opacity="0.9"
            ></path>
        </svg>
        <svg
            v-if="'error' == type"
            t="1737526512003"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            width="1em"
            height="1em"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8340"
            xmlns:xlink="http://www.w3.org/1999/xlink"
        >
            <path
                d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m44.245333-469.333333l159.914667-159.914667a31.274667 31.274667 0 1 0-44.245333-44.245333L512 467.754667 352.085333 307.84a31.274667 31.274667 0 1 0-44.245333 44.245333L467.754667 512l-159.914667 159.914667a31.274667 31.274667 0 1 0 44.245333 44.245333L512 556.245333l159.914667 159.914667a31.274667 31.274667 0 1 0 44.245333-44.245333L556.245333 512z"
                fill="#F5222D"
                p-id="8341"
            ></path>
        </svg>
        <svg
            v-if="'success' == type"
            t="1737526496411"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7261"
            width="1em"
            height="1em"
            xmlns:xlink="http://www.w3.org/1999/xlink"
        >
            <path
                d="M874.119618 149.859922A510.816461 510.816461 0 0 0 511.997 0.00208a509.910462 509.910462 0 0 0-362.119618 149.857842c-199.817789 199.679789-199.817789 524.581447 0 724.260236a509.969462 509.969462 0 0 0 362.119618 149.857842A508.872463 508.872463 0 0 0 874.119618 874.120158c199.836789-199.679789 199.836789-524.581447 0-724.260236zM814.94268 378.210681L470.999043 744.132295a15.359984 15.359984 0 0 1-5.887994 4.095996c-1.751998 1.180999-2.913997 2.362998-5.276994 2.913997a34.499964 34.499964 0 0 1-13.469986 2.914997 45.547952 45.547952 0 0 1-12.897986-2.303998l-4.095996-2.363997a45.291952 45.291952 0 0 1-7.009992-4.095996l-196.902793-193.789796a34.126964 34.126964 0 0 1-10.555989-25.186973c0-9.37399 3.583996-18.74698 9.98399-25.186974a36.429962 36.429962 0 0 1 50.372947 0l169.98382 167.423824L763.389735 330.220732a37.059961 37.059961 0 0 1 50.371947-1.732998 33.647965 33.647965 0 0 1 11.165988 25.186973 35.544963 35.544963 0 0 1-9.98399 24.575974v-0.04z m0 0"
                fill="#52C41A"
                p-id="7262"
            ></path>
        </svg>
        {{ text }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            text: '',
            type: 'warning'
        }
    },
    props: {},
    created() {},

    mounted() {},
    methods: {
        init(param) {
            clearTimeout(this.timer)
            this.visible = true
            this.text = param.text || ''
            this.type = param.type || 'success'
            this.timer = setTimeout(() => {
                this.visible = false
                clearTimeout(this.timer)
            }, 3000)
        }
    }
}
</script>
<style lang="scss" scoped>
.messages {
    position: fixed;
    min-width: 200px;
    top: 160px;
    left: 50%;
    transform: translate(-50%, 0);
    border: solid 1px #4b4b4b;
    //   box-shadow: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
    //     0 8px 10px rgba(0, 0, 0, 20%), inset 0 0.5px 0 #5e5e5e,
    //     inset 0.5px 0 0 #5e5e5e, inset 0 -0.5px 0 #5e5e5e, inset -0.5px 0 0 #5e5e5e;
    width: fit-content;
    border-radius: 6px;
    display: flex;
    align-items: center;
    z-index: 99999;
    color: rgba(255, 255, 255, 0.9);
    background-color: #242424;
    line-height: 22px;
    font-size: 14px;
    padding: 13px 16px;

    .message-icon {
        color: #cf6e2d;
        font-size: 20px;
        margin-right: 8px;
        fill: currentColor;
    }
}
</style>
